<template>
  <div class="w">
    <div class="image">
      <img src="https://bpic.588ku.com/element_origin_min_pic/19/06/15/d9b1152a4f8e7a15cf23b63a22521525.jpg" alt="">
    </div>
    <!-- 登录 -->
    <van-form class="form" @submit="onSumit">
      <van-field class="field" v-model="username" name="账号" label="账号" placeholder="账号" autocomplete="off" :rules="[{
        required: true,
        message: '请填正确格式账号',
        pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
      }]" />
      <van-field class="field" v-model="password" type="password" label="密码" placeholder="请输入密码" :rules="[{
        required: true,
        message: '密码必须由数字、字母两种字符组成，长度在8-15位之间',
        pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,15}$/
      }]" autocomplete="new-password">
      </van-field>
      <div style="margin: 16px;">
        <van-button round block native-type="submit" color="#ff4c4c">提交</van-button>
      </div>
      <p class="p">
        <span @click="changeUserZhuce">注册账号</span>
        <span>找回密码</span>
      </p>
      <van-checkbox class="checkbox" v-model="checked">温馨提示: 未注册的手机号，验证后将自动注册账户，且代表已同意 <span class="span">《服务协议与隐私政策》</span></van-checkbox>
    </van-form>
  </div>
</template>

<script lang="ts" setup>
import { showToast } from 'vant'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import http from "../../util/api"
const router = useRouter()
const username: any = ref('')
const password = ref('')
const checked = ref(false)
const store = useStore()
//点击登录
const onSumit = () => {
  if (checked.value) {
    http(`/userlist?telephone=${username.value}&password=${password.value}`).then((res: any) => {
      let { data } = res
      // console.log(data)
      if (data.length != 0) {
        store.commit('getUser',data)
        showToast({
          message: '登录成功',
          position: 'top',
        })
        store.commit('setDeng')
        router.push('/my')
      } else {
        showToast({
          message: '账号或密码错误！请核实！！',
          position: 'top',
        })
      }
    })
  } else {
    showToast('请先勾选相关协议！！！')
  }
}
// 点击注册
const changeUserZhuce = () => {
  router.push('/reg')
}

</script>

<style lang="scss" scoped>
.w {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  bottom: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f6f6f6;

  .image {
    margin-top: 150px;
    width: 100%;
    img {
      width: 50%;
      display: block;
      margin: 0 auto;
    }
  }
  .field {
    height: 110px;
    background-color: #f6f6f6;
  }
  .form {
    margin: 100px auto;
    width: 80%;
    height: 70vw;
  }
  .p {
    width: 80%;
    margin: 40px auto;
    display: flex;
    justify-content: space-around;

    >span {
      color: #666666;
      font-size: 23px;
    }
  }
  .checkbox {
    font-size: 12px;
  }

  .span {
    margin: 0 10px;
    color: rgb(118, 118, 234);
  }
}
</style>